<template>
  <!--实名认证-->
    <div>
      <p class="l-title-name">实名认证</p>

      <div class="l-filed">
        <div class="l-label">
          <span class="l-color-red">*</span><span>真实姓名：</span>
        </div>
        <input ref="username" type="text" placeholder="请输入真实姓名">
      </div>


      <div class="l-filed">
        <div class="l-label">
          <span class="l-color-red">*</span><span>身份证：</span>
        </div>
        <input ref="indentify" type="text" placeholder="请输入身份证号码">
      </div>

      <upload @upload="uploadImg"></upload>

      <div class="l-btn-ground">
        <div @click="submit" class="l-btn-submit">确定</div>
        <div @touchstart="router" class="l-btn-return">返回</div>
      </div>

      <p class="l-title">示例：</p>
      <div class="l-img-list">
        <img :src="zheng" alt="无法显示">
        <img :src="fang" alt="无法显示">
        <img :src="exp" alt="无法显示">
      </div>
      <p class="l-footer-info"><span class="l-red-color">*</span>手持身份证照须展示上传当日日期与签名。（上传照片限5m以内，jpg,gif,png,ico,bmp,jpeg格式。建议在PC端上传比较容易操作)</p>
    </div>
</template>

<script>
    import exp from '~/img/example.png'
    import fang from '~/img/id_fang.png'
    import zheng from '~/img/id_zheng.png'
    import upload from './common/upload'
    import {Toast} from "mint-ui"
    import {mapActions, mapState} from 'vuex'
    import api from '@/api/login'
    export default {
        name: "real-name",
        data () {
          return {
            zheng,
            fang,
            exp,
            imgList: {}
          }
        },
        components: {
          upload
        },
        computed: {
          ...mapState(['person'])
        },
        methods: {
          ...mapActions(['saveUserInfo']),
          router () {
            this.$router.go(-1)
          },
          submit () {
            let data = {}
            data['username'] = this.$refs.username.value
            data['indentify'] = this.$refs.indentify.value

            if(!data['username']) {
              Toast({
                message: "用户名不能为空",
                duration: 1000,
                position: "middle"
              })
            } else if (!data['indentify']) {
              Toast({
                message: "身份证号码不能为空",
                duration: 1000,
                position: "middle"
              })
            } else if (this.imgList['zheng']&&this.imgList['fang']&&this.imgList['complete']) {

              //ajax
              let formdata = new FormData
              formdata.append("name", data['username'])
              formdata.append("cardId", data['indentify'])
              formdata.append("photoOne", this.imgList['zheng'])
              formdata.append("photoTwo", this.imgList['fang'])
              formdata.append("photoThree", this.imgList['complete'])
              formdata.append("id", this.person.userInfo.id)

              api.post("user/certification/save", formdata, {isToken: true}).then(res => {
                Toast({
                  message: "资料上传成功",
                  duration: 1500
                })
                this.$router.go(-1)
              })

            } else {
              Toast({
                message: "请完善图片上传",
                duration: 1000,
                position: "middle"
              })
            }
          },
          uploadImg (img) {
           this.imgList = img
            console.log(this.imgList)
          }

        }
    }
</script>

<style lang="less" scoped>
  .l-title-name {
    font-size: 20px; /*no*/
    color: #9e7032;
    margin-left: 48px;
    font-weight: bold;
    margin-bottom: 40px;
  }

  .l-filed {
    display: flex;
    height: 70px;
    line-height: 70px;
    color: #9e7032;
    margin-bottom: 40px;
    font-size: 100%;

    .l-label {
      width: 180px;
      margin-left: 48px;
    }

    input {
      outline: none;
      border: 1px solid #9e7032;
      width: 480px;
      padding-left: 20px;
      background-color: #fefef1;
      font-size: 100%;
    }
    .l-color-red {
      color: red;
    }
  }


  /*示例图片*/
  .l-img-list {
    display: flex;
    padding-left: 50px;
    margin-top: 30px;
    margin-bottom: 54px;


    img {
      width: 190px;
      height: 118px;
    }

    img + img {
      margin-left: 40px;
    }
  }

  .l-title {
    color: #9e7032;
    font-size: 20px; /*no*/
    padding-left: 50px;
  }

  .l-footer-info {
    height: 40px;
    line-height: 40px;
    font-size: 100%; /*no*/
    padding-left: 50px;
  }

  .l-btn-ground {
    margin-left: 194px;
    margin-bottom: 40px;
    display: flex;

    .l-btn-submit, .l-btn-return {
      width: 180px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 32px;
      background-color: #986d33;
      color: #fff;
      border-radius: 45px;
    }
    .l-btn-return {
      margin-left: 20px;
    }
  }

</style>
